<template>
    <div class="wrapper">
        <mt-header :fixed="false" :title="`${$route.query.loginPassword=='1'?'设置':'修改'}登入密码`" mtClass="no-bg" rightIcon="icon-guanbi"/>
        <div class="blank">密码可使用字母、数字、字符组合，限8-20位</div>
        <div v-if="$route.query.loginPassword=='1'">
            <div class="list">
                <inputPwd tips="输入密码" @sendPwdToParent="getPwdFromChild"></inputPwd>
                <inputPwd tips="重新输入密码" @sendPwdToParent="getPwdFromChildAgain"></inputPwd>
            </div>
            <div class="default-btn">
                <mt-button type="primary" size="large" :disabled="(inputValuePwd&&inputValuePwdAgain)?false:true" @click.native="editLoginPwd">完成</mt-button>
            </div>
        </div>
        <div v-else>
            <div class="list">
                <inputPwd tips="原登入密码" @sendPwdToParent="getOldPwdFromChild"></inputPwd>
                <inputPwd tips="输入新密码" @sendPwdToParent="getPwdFromChild"></inputPwd>
                <inputPwd tips="重新输入新密码" @sendPwdToParent="getPwdFromChildAgain"></inputPwd>
            </div>
            <div class="default-btn">
                <mt-button type="primary" size="large" :disabled="(inputValuePwd&&inputValuePwdAgain&&inputValueOldPwd)?false:true" @click.native="editLoginPwd">完成</mt-button>
            </div>
            <div class="forget" @click="toFindPwd">忘记登入密码</div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import mtHeader from "@/components/Header"
import inputPwd from "@/components/InputPwd"
import { Toast } from 'mint-ui';
import { UpdateInfo } from '@/api/api'
export default {
    data() {
        return {
            inputValuePwd:'',
            inputValuePwdAgain:'',
            inputValueOldPwd:'',
        }
    },
    components:{
        mtHeader,
        inputPwd
    },
    methods: {
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        getOldPwdFromChild(value){
            this.inputValueOldPwd = value;
        },
        getPwdFromChild(value){
            this.inputValuePwd = value;
        },
        getPwdFromChildAgain(value){
            this.inputValuePwdAgain = value;
        },
        editLoginPwd(){
            if( this.inputValuePwdAgain == this.inputValuePwd ){
                if( this.$route.query.loginPassword=='1' ){
                    // 未设置
                    var data = {
                        loginPassword:this.inputValuePwd
                    }
                }else{
                    // 已设置
                    var data = {
                        loginPasswordOld:this.inputValueOldPwd,
                        loginPassword:this.inputValuePwd
                    }
                }
                UpdateInfo(data).then(res => {
                    if( res.code == 200 ){
                        this.set_userInfo(res.data)
                        Toast({
                          message: "已设置",
                          iconClass: 'icon iconfont icon-ic_check'
                        })
                        this.$router.push('/account/setting');
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        })
                    }
                })
            }else if( this.inputValueOldPwd == this.inputValuePwd ){
                Toast({
                    message: '新密码与原密码不能相同'
                });
            }else{
                Toast({
                    message: '重复输入密码不一致'
                });
            }
        },
        toFindPwd(){
            this.$router.push({
                path:'/findpwd',
                query:{ from:'editLoginPwd' }
            });
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .blank{
        height:44px;
        background:rgba(242,243,249,1);
        font-size:13px;
        color:#bfbfbf;
        line-height 44px;
        text-align:center;
    }
    .forget{
        padding:0 15px;
        margin-top:10px;
        font-size:12px;
        color:#5F88FF;
    }
    .tips{
        color: red;
    }
}
</style>
